<template>
	<div id="scan">
		<nav-tab activeColor="#0A0F15">
			<header-item>
				<div class="header-nav1" slot="header-img" @click="fanhui">
					<van-icon name="arrow-left" size="25px" color="#FFFFFF" />
				</div>
				<div class="header-nav2" slot="header-sc">
					<div style="font-size: 17px;color: black;">消息</div>
				</div>
				<div class="header-nav3" slot="header-xingx">
					<van-icon name="browsing-history-o" color="#FFFFFF" size="22px" style="margin-right: 30px;" />
					<van-icon name="info-o" color="#FFFFFF" size="22px" />

				</div>
			</header-item>
		</nav-tab>
		<div class="saoyisao">
			<div class="yuan">
				<div class="yun-content"></div>
			</div>
			<div class="footer-tis">放入框内，自动扫描</div>
		</div>
		<mainvr-bar></mainvr-bar>
	
	</div>
</template>

<script>
	import NavTab from '@/components/navtar/Header.vue'
	import HeaderItem from '@/components/navtar/HeaderItem.vue'
	import MainvrBar from '@/components/vrtab/MainvrBar.vue'
	import {
		Icon,
		Cell,
		CellGroup,
		Button
	} from 'vant';
	export default {
		methods: {
			fanhui() {
				this.$router.go(-1)
			}
		},
		components: {
			NavTab,
			HeaderItem,
			[Icon.name]: Icon,
			MainvrBar
		}
	}
</script>

<style lang="less" scoped>
	#scan {
		width: 100vw;
		height: 100%;
		position: fixed;
		background-color: #101010;
	}

	.saoyisao {
		margin-top: 45px;
		height: 375px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.yuan {
			width: 275px;
			height: 275px;
			border: 10px solid #BBBBBB;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			.yun-content {
				width: 260px;
				height: 260px;
				border: 1px dashed #BBBBBB;
				border-radius: 50%;
			}
		}

		.footer-tis {
			font-size: 17px;
			color: #969CA5;
			margin-top: 20px;
		}
	}

	.dibuBox {
		height: 71px;
		margin-top: 150px;
		display: flex;
		align-items: center;
		justify-content: space-between;
        padding: 0 20px;
		box-sizing: border-box;
		.dibuBox-item {
			width: 45px;
			height: 71px;
			font-size: 14px;
			color: #CDD3DB;
	       text-align: center;
			img {
				width: 45px;
				height: 44px;
				vertical-align: middle;
			}
		}

	}
	.tagkode{
		 position: absolute;
		 margin-top: 125px;
		 left: 50%;
		 margin-left: -35px;
	}
	.tagkode-no{
		 width: 80px;
		 height: 23px;
		 background-color:#F99A58 ;
		 border-radius: 15px;
		 font-size: 12px;
		 color: #FFFFFF;
		 display: flex;
		 align-items: center;
		 justify-content: center;
		
	}
	.triangle{
		width:0px;
		height: 0;
		border-top:5px solid #F99A58;
		border-left: 11px solid transparent;
		border-right: 11px solid transparent;
		margin-left:15px;
	}
</style>
